/* Base CSS for both Wiki & Blog. � 2008 Nuxeo

 Structure :

 BODY------------------------------;
 |  #WRAP-----------------------;  |
 |  |  #HEADER---------------;  |  |
 |  |  |  H1 + search        |  |  |
 |  |   ---------------------   |  |
 |  |  #MAIN-WRAPPER---------;  |  |
 |  |  | #MAIN------;#SIDEBAR|  |  |
 |  |  | |class=      |     ||  |  |
 |  |  | |main-content|     ||  |  |
 |  |  | ;------------;-----;|  |  |
 |  |  ;---------------------;  |  |
 |  |  #FOOTER---------------;  |  |
 |  |  ;---------------------;  |  |
 |  ;---------------------------;  |
 ;---------------------------------;

 */

body, html {
    margin: 0;
    padding: 0;
}

body {
    min-width: 1000px;
    color: #333;
    font: normal 12px Verdana, sans-serif;
    text-align: center;
    background: #fff url( ../image/background_page.gif ) top left repeat-x;
}

td {
    font: normal 12px Verdana, sans-serif;
    padding: 4px;
}

th {
    font: bold 12px Verdana, sans-serif;
    padding: 4px;
}

#wrap {
    margin: 0 auto;
    width: 1000px;
    height: 100%;
    text-align: left;
}

/* Header */

#header {
    width: 1000px; /*margin-right:220px;*/
    padding: 0px;
    text-align: middle;
    height: 50px;
}

#header img {
    float: left;
}

#header .webEngineRoot {
    float: left;
    padding: 19px 13px 0 0;
}

#header .webEngineRoot a img {
    border: 0;
}

#header .searchBox {
    padding-top: 10px;
    float: right;
    margin-right: 15px;
}

#header .searchBox input {
    width: 200px;
    padding-left: 5px;
}

#header h1 {
    font-size: 240%;
    font-color: white;
    text-align: left;
    padding: 0;
    padding-top: 6px;
    margin: 0;
    font-family: "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
    border-bottom: none;
    text-transform: capitalize;
}

#header h1 a {
    color: white;
    text-decoration: none;
    background: url( ../image/nuxeo_web_engine.gif ) top right no-repeat;
    padding-right: 80px;
}

/* Structure */

#main-wrapper {
    width: 100%;
    height: 100%;
    background: #fff url( ../image/background_main-wrapper.gif ) top right repeat-y;
    border-top: 1px solid #fff;
}

#main {
    background: #fff url( ../image/background-main.gif ) top left repeat-x;
    float: left;
    width: 760px;
}

/* SideBar */

#sidebar {
    background: url( ../image/background_sidebar.gif ) top left repeat-x;
    float: right;
    width: 240px;
    color: #f1f2f3;
}

#sidebar h3, #sidebar p {
    padding: 0 10px 0 0;
    margin: 0;
}

#sidebar h3 {
    color: #fff;
    background-color: transparent;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

#sidebar a, #sidebar a:link, #sidebar a:visited, #sidebar a:hover {
    color: #fff;
}

/* All blocks are "sideblock", "general" means they're shown everywhere and "contextual" that they depend on current document */

#sidebar .sideblock {
    padding: 6px;
    margin: 0px;
    margin: 0px 0px 10px 0px;
    font-size: 10px;
}

#sidebar .general {
    margin-left: 20px;
    margin-right: 5px;
    padding-top: 3px;
}

#sidebar .contextual {
    width: 226px;
    background: url( ../image/background_box_box.gif ) top left repeat-y;
    padding: 0;
    margin-bottom: 10px;
    color: #333;
}

#sidebar .contextual a, #sidebar .contextual a:link, #sidebar .contextual a:visited, #sidebar .contextual a:hover {
    color: #0066ff;
}

#sidebar .contextual h3 {
    background: url( ../image/background_box_title.gif ) top left no-repeat;
    height: 25px;
    padding: 0;
    padding-left: 25px;
    padding-top: 6px;
    color: #fff;
    border-bottom: none;
}

#sidebar ul {
    list-style-image: url( ../image/bullet_light.gif );
    padding: 0;
    margin: 5px 0 0 25px;
}

#treenav.treeview {
    margin: 0px;
}

#sidebar ul.branch {
    margin: 0px;
}

#sidebar .contextual ul {
    list-style-image: url( ../image/bullet.gif );
    margin-top: 0;
}

#sidebar .sideblock-content {
    background: url( ../image/background_box_content.gif ) top left no-repeat;
    padding: 10px 25px;
}

#sidebar .contextual .sideblock-content {
    padding-top: 5px;
}

#sidebar .sideblock-content-bottom {
    background: url( ../image/background_box_bottom.gif ) top left no-repeat;
    height: 5px;
    margin-bottom: 10px;
}

/* SideBar : CREATE button & login form and info */
#sidebar .createButton {
    text-align: center;
    padding: 0;
    font: bold 21px "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
    margin-top: 10px;
    padding-left: 8px;
    background-color: transparent;
}

#sidebar .createButton a {
    color: #fff;
    background: url( ../image/create_button.gif ) top left no-repeat;
    display: block;
    width: 192px;
    height: 40px;
}

#sidebar .createButton a:visited {
    color: #fff;
}

#sidebar .createButton a:hover {
    color: #fff;
    background-position: bottom left;
    text-decoration: none;
}

#sidebar .createButton a span {
    display: block;
    padding-top: 5px;
}

#sidebar #logstate {
    background: url( ../image/login_bubble.gif ) top left no-repeat;
    padding: 2px;
    padding-left: 4px;
    color: #000;
    height: 20px;
}

#sidebar #login {
}

#sidebar #login form {
    margin: 0;
}

#sidebar #login input {
    margin: 2px 0 4px 0;
}

#sidebar #login input.username, #sidebar #login input.password {
    width: 99px;
    padding: 4px;
    font-size: 10px;
    border: 1px inset #ccc;
}

#sidebar #login input.button {
    font-size: 10px;
    border: 1px outset #ccc;
    padding: 3px 5px;
}

#footer {
    background-color: #ccc;
    clear: both;
    vertical-align: middle;
    width: 1000px;
    padding: 10px 0;
}

#footer p {
    padding: 10px 0px 0px 0px;
    margin: 0;
    font-size: 80%;
    color: #666;
    text-align: center;
}

/* Message. Todo: when message will be fading away, add url(../image/info.gif) 3px 3px no-repeat as background and 4px padding tops and bottoms */

#message {
    float: left;
    background: #333;
    font: normal normal normal 12px "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
    color: #f1f2f3;
    padding: 0px 5px 0px 25px;
}

/* Main content styles
Structure :

main-content-------------;
| Jquery tabs-----------;|
| | ui-tabs-panel------;||
| | |<h1>              |||
| | |#entry-content---;|||
| | || doc----------; ||||
| | || |  <toc>     | ||||
| | || |  content   | ||||
| | || ;------------; ||||
| | |;----------------;|||
| | |#entry-attachment;|||
| | |;----------------;|||
| | ;------------------;||
| | #comments----------;||
| | ;------------------;||
| ;---------------------;|
;------------------------;

*/

.main-content {
    padding: 10px 20px;
}

#entry-content {
    padding: 0 10px;
}

.main-content p {
    margin: 5px 0 2px 0;
    line-height: 150%;
}

#main h2, #main h3, #main h4, #main p {
    padding: 2px 10px;
}

.main-content ul {
    list-style-image: url( ../image/bullet.gif );
    margin-top: 1px;
}

.main-content #entry-content ul li {
    line-height: 150%;
    text-align: justify;
    padding-right: 40px;
}

.main-content input.button {
    border-width: 1px;
}

.diff {
/* XXX */
    white-space: normal;
}

.diff ins {
    background: lightgreen;
    color: darkgreen;
}

.diff del {
    background: lightred;
    color: darkred;
}

.diff span {
    color: darkgrey;
}

a, a:link {
    text-decoration: none;
    color: #0066ff;
}

a:visited {
    color: #6666cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #0066ff;
}

h1 {
/* H1 */
    font: normal small-caps bold 240% "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
    color: #000;
    border-bottom: 1px solid #333;
    margin: 0;
    margin-bottom: 10px;
}

h2 {
/* H2 */
    background-color: #f1f2f3;
    font: normal normal bold 150% "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
    color: #111;
    margin: 0px;
    margin: 15px 0px 10px 0px;

}

h3 {
/* H3 */
    background-color: #fff;
    font: normal normal bold 133% "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
    margin: 10px 0 5px 0;
}

h4 {
    margin: 5px 0 2px 0;
    background-color: #fff;
}

pre {
    background-color: #F1F7FF;
    border: 1px dotted #555555;
    margin: 10px;
    padding: 7px;
    white-space: pre;
    font-size: 0.9em;
}

blockquote {
    line-height: 200%;
    font-style: italic;
    color: #666;
}

.hidden {
/* Use this to hide elements */
    display: none;
}

.tip {
    background: #ddeeff url( ../image/tip.gif ) 10px 10px no-repeat;
    padding: 10px 10px 10px 40px;
    margin-top: 10px;
}

/* Table of contents */

#main .toc {
    border: 1px solid #e4e4e4;
    margin-bottom: 5px;
    font-size: 12px;
}

#main .toc .tocTitle {
    margin-top: 0;
    background-color: #f1f2f3;
    color: #666;
    font: normal normal bold 14px "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
    padding: 2px 10px;
}

#main .toc .contentToc {
    padding: 10px;
}

#main .toc ol ol {
    margin-left: 20px;
    padding-left: 0px;
}

/* CSS 2 Toc : 1, 1.1, etc. */

.toc ol {
    counter-reset: item;
}

.toc li {
    display: block;
    padding: 2px 0;
}

.toc li:before {
    content: counters( item, "." ) " ";
    counter-increment: item;
}

/* Attachments */

#main #entry-attachments {
    margin-top: 20px;
    border: 1px solid #e4e4e4;
}

#main #entry-attachments .attachedTitle {
    margin-top: 0;
    margin-bottom: 10px;
    background-color: #f1f2f3;
    color: #666;
    font: normal normal bold 14px "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
    padding: 2px 10px;
}

#main #entry-attachments #attached_files {
    padding: 0 10px;
}

/* for safari otherwise titles don't have right color. Theses lines are to be overrided by wiki.css and blog.css for font color */

#main .main-content h2 {
    background-color: #f1f2f3;
}

#main .main-content h3, #main .main-content h4, #main .main-content .summary-content h2 {
    background-color: white;
}

/* Css 2 for firefox */

body {
    counter-reset: chapter;
}

.main-content .doc h2:before {
    content: counter( chapter ) " ";
    counter-increment: chapter;
}

.main-content .doc h2 {
    counter-reset: section;
}

.main-content .doc h3:before {
    content: counter( chapter ) "." counter( section ) " ";
    counter-increment: section;
}

/* Summary (list of blog entries on blog view) */

.summary-entry {
    border: 1px solid #000;
    margin-bottom: 15px;

}

.summary-title {
/* title of entries */
    font-variant: small-caps;
    font-size: 28px;
    background: #f1f2f3;
    margin-top: 0;
    margin-bottom: 2px;
    border-bottom: 1px solid #ccc;
}

.summary-byline {
/* Byline */
    font: italic normal normal .8em Verdana, sans-serif;
    color: #666;
    padding: 2px 0 0 0;
    text-align: right;
    margin-bottom: 5px;
}

.summary-content h2 {
    background-color: transparent;
}

/* Buttons */

#main p.buttonsGadget {
    padding: 5px;
}

#main p.buttonsGadget input.button {
}

/* Edit page */

#main h1 input {
/* H1 */
    font: normal small-caps bold 28px "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
    color: #000;
    border-bottom: 1px inset #ccc;
    margin: 0;
    margin-bottom: 5px;
    width: 695px;
}

#main textarea.entryEdit {
    width: 678px;
}

#main  p.entryEditOptions {
    padding: 15px 5px;
    background-color: #ffebac;
}

#main .markItUp {
    width: 690px;
}

#main .markItUp textarea.markItUpEditor {
    background-position: top right;
    padding-left: 5px;
}

/* For forms */
.formFill td.formLabel {
    background-color: #ffffcc;
}

/* Tabs (overrides jquerys flora) */

#entry-actions .ui-tabs-nav li {
    font-family: "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
    float: right;
    font-weight: normal;
    font-size: 9px;
}

#entry-actions .ui-tabs-nav a, #entry-actions .ui-tabs-nav a span {
    background-image: url( ../image/background_tabs.gif );
}

#entry-actions .ui-tabs-panel {
    border-color: #000;
    min-height: 100px;
}

/* or use this when no tabs */

#mainContentBox {
    border: 1px solid #000;
    min-height: 160px;
    padding: 10px;
}

#main .ui-tabs-nav, #main .ui-tabs-panel {
    font-family: Verdana, sans-serif;
    list-style-image: none;
}

/* List of items (common for many tables) */

#main .itemListing {
    padding: 5px;
    font-size: 10px;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #666;
    margin-bottom: 10px;
}

#main .itemListing th {
    padding: 3px;
    background-color: #666;
    color: #fff;
    text-align: left;
}

#main .itemListing td {
    padding: 3px;
    border: 1px solid #666;
    border-width: 1px 0;
    text-align: left;
}

/* History */

#main .history {
    padding: 5px;
    font-size: 10px;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #666;

}

#main .history th {
    text-align: center;
}

#main .history td {
    text-align: center;
}

/* Admin */

.adminBoardSettings {
    width: 156px;
    height: 156px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #ccc;
    float: left;
    margin-right: 10px;
}

.adminBoardSettings h3 a img {
    border-width: 0px;
}

/* Admin : users */

#main .userSearch {
    float: left;
    width: 49%;
}

#main .groupSearch {
    float: right;
    width: 49%;
}

#main .userSearch h2, #main .groupSearch h2 {
    margin-top: 0;
}

#main .directories {
}

#main .directories th {
}

#main .directories td {
}

/* Comment box */

#entry-comments {
    border: 1px solid #000;
    margin-top: 15px;
    padding: 10px;
}

#entry-comments h1 {
    font-size: 190%;
}

.commentsList #comments {
    font: normal normal bold 133% "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
    color: #666;
}

.commentsList #comments li {
    margin-bottom: 15px;
}

.commentsList .comment .byline, #main #entryComments .addComment input.commentAuthor {
    margin-bottom: 3px;
    font: normal normal bold 10px Verdana, sans-serif;
    color: #333;
}

#main .commentsList .comment p, #main #entryComments .addComment textarea.commentText {
    font: normal normal normal 12px Verdana, sans-serif;
    color: #000;
    border-left: 3px solid #ccc;
    padding-left: 5px;
    margin-left: 0;
}

#main #entryComments .addComment input, #main #entryComments .addComment textarea {
    border-width: 1px;
    margin-bottom: 8px;
}

#main #entryComments .addComment input.commentAuthor, #main #entryComments .addComment textarea.commentText {
    padding: 3px;
}
